Hansen

HTML5 Multipurpose Template

created: 09/06/2015
by: themekiosk
email: themekiosk@zoho.com

Outsider is Responsible HTML5 Template usable as a landing page for your app / service or portfolio site for your team. Template is built with Bootstrap 3 framework. It is easily customizable, the choice is yours.

Once downloaded, unzip the compressed folder to see the structure of the Outsider. You'll see next structure:

outsider/

├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── flaticon.css
│   ├── font-awesome.css
│   ├── font-awesome.min.css
│   ├── magnific-popup.css
│   ├── main.css
│   ├── slick.css  
│   └── slick-theme.css
├── fonts/
│   ├── flaticon.eot
│   ├── flaticon.svg
│   ├── flaticon.eot.ttf
│   ├── flaticon.eot.woff
│   ├── FontAwesome.otf
│   ├── fontawesome-webfont.eot
│   ├── fontawesome-webfont.svg
│   ├── fontawesome-webfont.ttf
│   ├── fontawesome-webfont.woff
│   ├── fontawesome-webfont.woff2
│   ├── slick.eot
│   ├── slick.svg
│   ├── slick.ttf
│   └── slick.woff
├── img/
│   ├── clients/
│       └── *images
│   ├── parallax/
│       └── *images
│   ├── screens/
│       └── *images
│   ├── svg/
│       └── *images
│   ├── thumbs/
│       └── *images
│   └── *images
├── js/
│   └── vendor/
│       └── *for detailed list see js section
│   ├── bootstrap.js
│   ├── bootstrap.min.js
│   ├── contact.js
│   ├── main.js
│   ├── mymap.js
│   └── svg.animate.js
├── php/
│   ├── twitter/
│       ├── lib/
│           ├── tmhOAuth.php
│           └── tmhUtilities.php
│       └── index.php
│   ├── contact-form.php
│   └── newsletter.php
├── 404.html
├── about.html
├── contact.html
├── comingsoon.html
├── index.html
├── post-centered.html
├── post-leftsidebar.html
├── post-rightsidebar.html
└── shortcodes.html

This theme is a responsive layout based on Bootstrap 3. All of the information within the main content area is nested within a body tag. The general template structure is the same throughout the template.

General structure: Navbar - Header - Main - Footer

Simple HTML Structure (index.html):

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <title>Hansen</title>
        ...
 
        <!-- FONTS -->
        <link rel="stylesheet" href="css/font-awesome.min.css"> <!-- Optional -->
        <link rel="stylesheet" href="css/flaticon.css">
        ...
        
        <!-- CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        ...
 
        <!-- Favicon -->
        <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
        <link rel="icon" type="image/png" href="favicon.png">
 
        <script src="js/vendor/modernizr.js"></script>
 
    </head>
    <body>
        <!-- Navbar -->
        <nav class="navbar navbar-burger navbar-fixed-top is-transparent" role="navigation">
             ...
        </nav>

        <!-- Header -->
        <header class="header hero flex flex-middle flex-center" role="banner">
            ...
        </header>

        <!-- Content -->
        <main class="main" role="main">
            <!-- Clients -->
            <section class="section clients no-padding text-center">
                ...
            </section>
            <!-- Features -->
            <section class="section text-center">
                ...
            </section>
            ...
        </main>

        <!-- Footer -->
        <footer class="footer" role="contentinfo">
            ...
        </footer>

        <!-- Scripts
        –––––––––––––––––––––––––––––––––––––––––––––––––– -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"></script>')</script>
        <script src="js/bootstrap.min.js"></script>
 
        <script src="js/vendor/jquery.appear.js"></script>
        ...
        ...
        <script src="js/vendor/jquery.magnific-popup.min.js"></script>
 
        <script src="js/main.js"></script>
    
    </body>
</html>

All css files are located in css folder:

bootstrap.css, bootstrap.min.css - Bootstrap 3 (version 3.3.5) Framework base stylesheets.
flaticon.css - Flaticon Icons font stylesheet.
font-awesome.css, font-awesome.min.css - Font Awesome - The iconic font and CSS toolkit
magnific-popup.css - Magnific Popup core CSS file
main.css - base file that includes general styles - details see below
slick.css - stylesheet for Slick: Touch enabled jQuery plugin that lets you create responsive carousel slider

main.css

This file includes all general variables used in this template. If you want to change style and colors of the template you should start from this file.

/* Table of Contents
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
* Default
    * Flexbox
* Highlighting
* Navbar
* Social List
* Header
* Main
* Masonry
    * Filter
    * Pagination
* Post
    * Meta
    * Comments
    * Reply form
    * Sidebar, Widgets
* Subscribe
* About
* Contact
* Footer
* Buttons
* Scroll Top
* Page 404
* Card
* Pricing Tables
* Counter
* Progress Bars
* Collapse
* Tabs
*/

Example code:

/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 300px;
  padding: 2em 0;
  text-align: left;
  color: #393a3a;
  background: none repeat scroll center center #ffffff;
}

bootstrap.css, bootstrap.min.css

Bootstrap 3 Framework base stylesheets. Includes all components and elements, typography, lists, buttons, button groups, navigations, navbars, forms, labels, pricing tables and much more. This stylesheet must always be included! We recommend minified version bootstrap.min.css for use. For development you can use bootstrap.css, or you can customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version here.

This template used also generated style. Click http://getbootstrap.com/customize/ and insert our json file - included in pack - and make changes if you need.

All Javascript files are located in js folder.

vendor/ (folder with all external scripts used in template)
- gmap3.min.js - GMap3 is the ultimate plugin to create and manage Google Maps to jQuery.
- jquery.appear.js - jQuery Appear plugin to call a function when an element appears.
- jquery.countdown.min.js - The Final Countdown. A simple and html agnostic date countdown plugin for jQuery. (Used in comingsoon.html)
- jquery.countTo.js - jQuery countTo is a jQuery plugin that will count up (or down) to a target number at a specified speed, rendered within an HTML DOM element.
- jquery.magnific-popup.min.js -Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
- jquery.parallax.min.js - parallax.js, Parallax Engine that reacts to the orientation of a smart device.
- jquery.tweet.min.js - Tweet.js Latest Tweets plugin.
- jquery-1.11.3.min.js - jQuery is a fast, small, and feature-rich JavaScript library.
- modernizr.js - Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
- slick.js - Slick: Touch enabled jQuery plugin that lets you create responsive carousel slider

bootstrap.js, bootstrap.min.js - Bootstrap 3 javascript library.
contact.js - main JS for Contact Form
main.js - Custom script, initialize all all necessary scripts and functions
mymap.js - Script to run Google map

Getting the Template Online

Warning! This is not a Wordpress template. Running in Wordpress CMS will have no effect.

This is HTML5 template, you do not need create a database. You simply upload to the server.

It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.
The template folder will have several files with the extension labeled .html. This is where all your content will. It's very important to keep the css and js-plugin folders with the HTML or the HTML will not look how the design is meant to look. Along with the HTML files, you will also have four additional folders to upload: css, js, fonts, and images.
Start your FTP client (Total Commander or FileZilla) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.

php Contact Form and Twitter Feed working only in server environment with installed php, not localy. You must load your content on server.

Layout Settings

Complement your content, write your text, load your photos and images.

Compress the size of images and photos. Demo template uses high resolution images, but for normal use it is not appropriate. High-res photos = slow website loading.

Counters Settings

Main Page (index.html)

Setting the counters make directly in HTML code. Open index.html and follow the example below:

            <!-- Fun Facts / Counters -->
            <section class="section counters">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-4 col-md-4">
                            <div class="numbers">
                                <span class="number" data-from="0" data-to="987" data-speed="5000" data-refresh-interval="50"></span>
                                <span class="number-info">Creative Ideas</span>
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="numbers">
                                <span class="number" data-from="0" data-to="218" data-speed="5000" data-refresh-interval="50"></span>
                                <span class="number-info">Projects Designed</span>
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="numbers">
                                <span class="number" data-from="0" data-to="1356" data-speed="5000" data-refresh-interval="50"></span>
                                <span class="number-info">Happy Customers</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

Change number value data-to="number".

For further documentation and setting information, see jQuery countTo.

Parallax

Main Page (index.html)

parallax.js is Parallax Engine that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead.

Setting the charts make directly in HTML code. Open index.html and follow the example below:

            <!-- Gallery / Parallax Scene -->
            <section class="section text-center">
                <div class="container">
                    ...
                    <div class="row">
                        <div class="col-md-12">
                            <!-- Parallax Scene -->
                            <article class="scene-container">
                                <ul id="scene" class="scene">
                                    <li class="layer" data-depth="0.50">
                                        <img src="img/parallax/screen1.png" alt="screen" />
                                    </li>
                                    <li class="layer" data-depth="0.40">
                                        <img src="img/parallax/screen2.png" alt="screen" />
                                    </li>
                                    <li class="layer" data-depth="0.30">
                                        <img src="img/parallax/screen3.png" alt="screen" />
                                    </li>
                                    <li class="layer" data-depth="0.40">
                                        <img src="img/parallax/screen4.png" alt="screen" />
                                    </li>
                                    <li class="layer" data-depth="0.50">
                                        <img src="img/parallax/screen5.png" alt="screen" />
                                    </li>
                                    <li class="layer" data-depth="0.40">
                                        <img src="img/parallax/screen6.png" alt="screen" />
                                    </li>
                                    <li class="layer" data-depth="0.60">
                                        <img src="img/parallax/screen7.png" alt="screen" />
                                    </li>
                                    <li class="layer" data-depth="0.50">
                                        <img src="img/parallax/screen8.png" alt="screen" />
                                    </li>
                                    <li class="layer" data-depth="0.60">
                                        <img src="img/parallax/screen9.png" alt="screen" />
                                    </li>
                                </ul>
                            </article>
                        </div>
                    </div>
                    <div class="row">
                        ...
                    </div>
                </div>
            </section>

Change number value data-percent="number".

For further documentation and setting information, see Easy Pie Chart.

(changing value percent - see Counters Settings above)

Coming Soon Page (comingsoon.html)

Open comingsoon.html. Just edit data-date="YYYY-MM-DD HH:MM:SS".

Set date and time, example 2015-09-30 23:59:59

        <!-- Coming soon -->
        <section class="comingsoon">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <header class="section-header">
                            <h3 class="section-title" data-text="Coming Soon">It´s time for website redesign</h3>
                        </header>
                    </div>
                    <div class="col-md-8 col-md-offset-2">
                        <div id="dateCountdown" data-date="2015-09-30 23:59:59"></div><!-- Time Circles -->
                        <p>But don´t wait, learn more about us now.</p>
                        <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">
                            Who we are
                        </button>
                    </div>
                </div>
            </div>
        </section>

For further documentation and setting information, see Time Circles.

Location - Google Map

To edit the Google Map style and location marker please open mymap.js in your favorite text editor. Edit the location marker, enter your Address or Latitude and Longitude coordinates.

You can find your Lat and Lng by using this resource: http://www.latlong.net/convert-address-to-lat-long.html

// ---------------------------------------
// // GMap 3 - Set Address on line 29
// ---------------------------------------

var styles = [
    ...
      ];

$("#my-map").gmap3({
    marker:{
      address: '48.871663 , 2.304572'     < = = =  Line 79 in script, HERE SET ADDRESS Coordinates
    },
    map:{
      options:{
          ...
        }
    }
});

Example with full address:

$("#my-map").gmap3({
    marker:{
      address: "San Francisco, CA 94107, 795 Folsom Ave"   < = = =  Write a traditional address
    },
    map:{
      options:{
          ...
        }
    }
});

Contact Form

This template contains fully working contact form. Forms used Foundation5 Abide Validation form validation library, script contact.js (must be included before end body tag) and php file (contact-form.php or newsletter.php).

All you need is replace you actual e-mail address.

Contact Form

In order to receive messages you need to edit line 12 of php/contact-form.php file and type in your own email address:

<?php
...
    // Your email address - edit line 12
    $recipient = "your@mail.com";                     < = = = HERE REPLACE YOUR EMAIL ADDRESS
...
?>

Latest Tweets Plugin

Plugin is based on jquery.tweet.js-mod plugin by Stan Scates. It is simple to use and configure.

First step: You need to have a twitter App for your usage in order to obtain OAuth credentials. See https://dev.twitter.com/apps for help.

Second step: After obtaining OAuth credentials, put them to php/twiter/index.php. Edit following code:

<?php
/* Configure your twitter API access params below */
// Your Twitter App Consumer Key
$consumer_key = 'YOUR_CONSUMER_KEY';        < = = = HERE REPLACE YOUR CONSUMER KEY                           

// Your Twitter App Consumer Secret
$consumer_secret = 'YOUR_CONSUMER_SECRET';  < = = = HERE REPLACE YOUR CONSUMER SECRET                  

// Your Twitter App Access Token
$user_token = 'YOUR_ACCESS_TOKEN';     < = = = HERE REPLACE YOUR ACCESS TOKEN                 

// Your Twitter App Access Token Secret
$user_secret = 'YOUR_ACCESS_TOKEN_SECRET';    < = = = HERE REPLACE YOUR ACCESS TOKEN SECRET

The third step: Open js/main.js (record for twitter script starts on line 145) and edit this code, especially line 150:

// -----------------------------
// Twitter
// -----------------------------
$(".twitter-feed").tweet({
    join_text: "auto",
    username: ["username"],         < = = = Line 150 SPECIFY TWITTER USERNAME (see info below)                                           
    modpath: "php/twitter/",                 
    count: 6,                       < = = = Line 152 (Optional) SET NUMBER OF LOADED TWEETS                                                
    loading_text: "loading ...",
    template: "{text},{time},{user}",        
    auto_join_text_default: " ", //We said,
    auto_join_text_ed: " ", //We
    auto_join_text_ing: " ", //We were
    auto_join_text_reply: " ", //We replied
    auto_join_text_url: " " //We were checking out
 });

Twitter Username: Line 150

You may specify twitter username to fetch tweets from. By default it is blank, because it will fetch tweets from user, who owns the Twitter App, that you configured at php/twitter/index.php.

You can load tweets from another user. As you can see in the example above, will now be loaded tweets by envato.

For further documentation about jquery.tweet plugin, see Author Repository.

Flaticon Icons Font

Template uses custom set of 50 Flaticons designed by Freepik

You can place Flaticon icons just about anywhere with the i tag. You can also use other techniques, with span or a, but i tag is the best choice.

<i class="fa flaticon-envelope"></i>

Replace icon name, example flaticon-envelope, with the actual icon name you wish to display, example flaticon-home.

Class fa is universal for Flaticon and Font Awesome.

Font Awesome - Iconic Font

Analogous like Linea Icons. Font Awesome contains 585 icons that you can easily use and customize.

You can place Font Awesome icons just about anywhere with the i tag. You can also use other techniques, with span or a, but i tag is the best choice.

<i class="fa fa-heart"></i>

Replace icon name, example fa-heart, with the actual icon name you wish to display. Full list of icons: visit Font Awesome

Color Filter

Slides with background images using a color filters. If the image is too bright or too dark, or if the font is not visible in the background or for a nicer effect. You can easily customize it as needed.

Example 1:

#home:before {              /* Use this color filter - for example with too light bg image
    content: " ";
    position: absolute;
    top: 0;
    left: 0;    
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgb(43, 45, 53);  /*fallback*/                                          
    background-color: rgba(43, 45, 53, 0.50);      < = = = RGBA: SET OPACITY 0-1                                 
}

Example 2:

#home:before {              /* Use this color filter - for example with too light bg image
    content: " ";
    position: absolute;
    top: 0;
    left: 0;    
    display: block;
    width: 100%;
    height: 100%;
    background-color: #808080;
    opacity: 0.2;                   < = = = SET ELEMENT OPACITY 0-1                                            
}

Plugins, files, extensions and libraries used in template

Framework

Bootstrap 3

Plugins

Fonts

Images (not included)

Unsplash

Please feel free to contact us, if you have question or problem about this template.
Guarantee support for HTML and CSS issues. Troubleshooting with javascript and jquery - we will do what we can.

Thank you for purchasing our theme. We look forward to equally successful cooperation in the future!

Your Themekiosk Team

Hansen

HTML5 Multipurpose Template

Files Structure

HTML Structure

CSS Structure

main.css

Table of Contents

Example code:

bootstrap.css, bootstrap.min.css

Javascript

Installation

Getting the Template Online

Customization

Layout Settings

Counters Settings

Main Page (index.html)

Parallax

Main Page (index.html)

Coming Soon Page (comingsoon.html)

Location - Google Map

Contact Form

Contact Form

Latest Tweets Plugin

Twitter Username: Line 150

Flaticon Icons Font

Font Awesome - Iconic Font

Color Filter

Credits

Plugins, files, extensions and libraries used in template

Framework

Plugins

Fonts

Images (not included)

Support